<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>CSS3 Gmail Buttons by Adam Whitcroft</title>
	<!-- Stylesheets -->
	<link rel="stylesheet" href="layout.css" type="text/css" />
	<link rel="stylesheet" href="css3-gmail-style.css" type="text/css" />
	<!-- Javascript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	<script>
	$(document).ready(function(){
	$('.bttn').click(function(e){
		e.preventDefault();
	});	
	});
	</script>
</head>

<body class="wrapper">
	
	<header>
		<h1>CSS3 Gmail Buttons</h1>
		<p>
			<a href="https://github.com/AdamWhitcroft/CSS3.Gmail.Buttons" title="CSS3 Gmail Buttons by Adam Whitcroft on Github">CSS3 Gmail Buttons</a> is a collection of button styles inspired by the new Gmail UI.
		</p>
		<p>
			Start with the basic <code>class="bttn"</code> and add classes as necessary. The buttons include a subtle <code>:hover</code> and <code>:active</code> state included.
		</p>
		<p>
			The icons were designed at 12x12. If you'd like to alter the icons, you can download the <abbr title="Photoshop Document">PSD</abbr> from the <a href="https://github.com/AdamWhitcroft/CSS3.Gmail.Buttons" title="CSS3 Gmail Buttons by Adam Whitcroft on Github">project repository</a>.
		</p>
		<img src="icon-pack.png" alt="CSS3 Gmail UI icon set" />
	</header>	
	<section>
		<ul>
			<li>
				<a href="" class="bttn">Click me</a>
				<pre>&lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn emphasis">Click me</a>
				<pre>&lt;a href="#" class="bttn emphasis"&gt;Click me&lt;a&gt;</pre>
			</li>		
		</ul>
	</section>
<!-- section -->	
	<section>
		<ul>
			<li>
				<a href="" class="bttn red">Click me</a>
				<pre>&lt;a href="#" class="bttn red"&gt;Click me&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn blue">Click me</a>
				<pre>&lt;a href="#" class="bttn blue"&gt;Click me&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn yellow">Click me</a>
				<pre>&lt;a href="#" class="bttn yellow"&gt;Click me&lt;a&gt;</pre>
			</li>			
		</ul>		
	</section>
<!-- section -->
	<section>
		<ul>
			<li>
				<a href="" class="bttn red icon">Icon</a>
				<pre>&lt;a href="#" class="bttn red icon"&gt;Icon&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn blue icon">Icon</a>
				<pre>&lt;a href="#" class="bttn blue icon"&gt;Icon&lt;a&gt;</pre>
			</li>	
			<li>
				<a href="" class="bttn yellow icon">Icon</a>
				<pre>&lt;a href="#" class="bttn yellow icon"&gt;Icon&lt;a&gt;</pre>
			</li>			
		</ul>
	</section>		
	<section>
		<ul>
			<li>
				<a href="" class="bttn icon add">Add</a>
				<pre>&lt;a href="#" class="bttn icon add"&gt;Add&lt;a&gt;</pre>
			</li>								
			<li>
				<a href="" class="bttn icon apple">Apple</a>
				<pre>&lt;a href="#" class="bttn icon apple"&gt;Apple&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon approve">Approve</a>
				<pre>&lt;a href="#" class="bttn icon approve"&gt;Approve&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon attachment-1">Attachment 1</a>
				<pre>&lt;a href="#" class="bttn icon attachment-1"&gt;Attachment 1&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon attachment-2">Attachment 2</a>
				<pre>&lt;a href="#" class="bttn icon attachment-2"&gt;Attachment 2&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon bookmark">Bookmark</a>
				<pre>&lt;a href="#" class="bttn icon bookmark"&gt;Bookmark&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon calendar">Calendar</a>
				<pre>&lt;a href="#" class="bttn icon calendar"&gt;Calendar&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon cart">Cart</a>
				<pre>&lt;a href="#" class="bttn icon cart"&gt;Cart&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon clipboard">Clipboard</a>
				<pre>&lt;a href="#" class="bttn icon clipboard"&gt;Clipboard&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon close">Close</a>
				<pre>&lt;a href="#" class="bttn icon close"&gt;Close&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon comment">Comment</a>
				<pre>&lt;a href="#" class="bttn icon comment"&gt;Comment&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon delete">Delete</a>
				<pre>&lt;a href="#" class="bttn icon delete"&gt;Delete&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon download">Download</a>
				<pre>&lt;a href="#" class="bttn icon download"&gt;Download&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon dropdown">Dropdown</a>
				<pre>&lt;a href="#" class="bttn icon dropdown"&gt;Dropdown&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon edit">Edit</a>
				<pre>&lt;a href="#" class="bttn icon edit"&gt;Edit&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon favourite">Favourite</a>
				<pre>&lt;a href="#" class="bttn icon favourite"&gt;Favourite&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon folder">Folder</a>
				<pre>&lt;a href="#" class="bttn icon folder"&gt;Folder&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon folder-plus">Folder Plus</a>
				<pre>&lt;a href="#" class="bttn icon folder-plus"&gt;Folder Plus&lt;a&gt;</pre>
			</li>	
			<li>
				<a href="" class="bttn icon folder-minus">Folder Minus</a>
				<pre>&lt;a href="#" class="bttn icon folder-minus"&gt;Folder Minus&lt;a&gt;</pre>
			</li>					
			<li>
				<a href="" class="bttn icon fork">Fork</a>
				<pre>&lt;a href="#" class="bttn icon fork"&gt;Fork&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon home">Home</a>
				<pre>&lt;a href="#" class="bttn icon home"&gt;Home&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon like">Like</a>
				<pre>&lt;a href="#" class="bttn icon like"&gt;Like&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon link">Link</a>
				<pre>&lt;a href="#" class="bttn icon link"&gt;Link&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon list">List</a>
				<pre>&lt;a href="#" class="bttn icon list"&gt;List&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon lock">Lock</a>
				<pre>&lt;a href="#" class="bttn icon lock"&gt;Lock&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon mail">Mail</a>
				<pre>&lt;a href="#" class="bttn icon mail"&gt;Mail&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon maximise">Maximise</a>
				<pre>&lt;a href="#" class="bttn icon maximise"&gt;Maximise&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon minimise">Minimise</a>
				<pre>&lt;a href="#" class="bttn icon minimise"&gt;Minimise&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon move">Move</a>
				<pre>&lt;a href="#" class="bttn icon move"&gt;Move&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon new-window">New Window</a>
				<pre>&lt;a href="#" class="bttn icon new-window"&gt;New Window&lt;a&gt;</pre>
			</li>	
			<li>
				<a href="" class="bttn icon pin">Pin</a>
				<pre>&lt;a href="#" class="bttn icon pin"&gt;Pin&lt;a&gt;</pre>
			</li>								
			<li>
				<a href="" class="bttn icon print">Print</a>
				<pre>&lt;a href="#" class="bttn icon print"&gt;Print&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon profile">Profile</a>
				<pre>&lt;a href="#" class="bttn icon profile"&gt;Profile&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon refresh">Refresh</a>
				<pre>&lt;a href="#" class="bttn icon refresh"&gt;Refresh&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon remove">Remove</a>
				<pre>&lt;a href="#" class="bttn icon remove"&gt;Remove&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon rss">RSS</a>
				<pre>&lt;a href="#" class="bttn icon rss"&gt;RSS&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon save">Save</a>
				<pre>&lt;a href="#" class="bttn icon save"&gt;Save&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon search">Search</a>
				<pre>&lt;a href="#" class="bttn icon search"&gt;Search&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon settings">Settings</a>
				<pre>&lt;a href="#" class="bttn icon settings"&gt;Settings&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon stats">Stats</a>
				<pre>&lt;a href="#" class="bttn icon stats"&gt;Stats&lt;a&gt;</pre>
			</li>			
			<li>
				<a href="" class="bttn icon sync">Sync</a>
				<pre>&lt;a href="#" class="bttn icon sync"&gt;Sync&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon tag">Tag</a>
				<pre>&lt;a href="#" class="bttn icon tag"&gt;Tag&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon tools">Tools</a>
				<pre>&lt;a href="#" class="bttn icon tools"&gt;Tools&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon unlock">Unlock</a>
				<pre>&lt;a href="#" class="bttn icon unlock"&gt;Unlock&lt;a&gt;</pre>
			</li>						
			<li>
				<a href="" class="bttn icon upload">Upload</a>
				<pre>&lt;a href="#" class="bttn icon upload"&gt;Upload&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon view">View</a>
				<pre>&lt;a href="#" class="bttn icon view"&gt;View&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon vol-mute">Volume Mute</a>
				<pre>&lt;a href="#" class="bttn icon vol-mute"&gt;Vol-mute&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon vol-low">Volume Low</a>
				<pre>&lt;a href="#" class="bttn icon vol-low"&gt;Vol-low&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon vol-mid">Volume Mid</a>
				<pre>&lt;a href="#" class="bttn mid vol-mute"&gt;Vol-mid&lt;a&gt;</pre>
			</li>
			<li>
				<a href="" class="bttn icon vol-high">Volume High</a>
				<pre>&lt;a href="#" class="bttn icon vol-high"&gt;Volume High&lt;a&gt;</pre>
			</li>																											
		</ul>					
	</section>
<!-- section -->		
	<section>
		<ul class="grouped">
			<li><a href="" class="bttn">Click me</a></li>
			<li><a href="" class="bttn">Click me</a></li>
			<li><a href="" class="bttn">Click me</a></li>
			<li><a href="" class="bttn">Click me</a></li>
		</ul>
		<pre>&lt;ul class="grouped"&gt;
  &lt;li&gt;&lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
		<div class="grouped">
			<a href="" class="bttn">Click me</a>
			<a href="" class="bttn">Click me</a>
			<a href="" class="bttn">Click me</a>
			<a href="" class="bttn">Click me</a>
		</div>
		<pre>&lt;div class="grouped"&gt;
  &lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;
  &lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;
  &lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;
  &lt;a href="#" class="bttn"&gt;Click me&lt;a&gt;
&lt;/div&gt;</pre>
		<div class="grouped">
			<a href="" class="bttn prev">Previous</a>
			<a href="" class="bttn next">Next</a>
		</div>
		<pre>&lt;div class="grouped"&gt;
  &lt;a href="#" class="bttn prev"&gt;Previous&lt;a&gt;
  &lt;a href="#" class="bttn next"&gt;Next&lt;a&gt;
&lt;/div&gt;</pre>		
	</section>
	<footer>
		<h2>License</h2>
		<p>
			Licensed under <a href="http://licence.visualidiot.com/">&#9786; License</a>.
		</p>
		<a href="https://twitter.com/share" class="twitter-share-button" data-text="CSS3 Gmail Buttons -" data-count="horizontal" data-via="AdamWhitcroft">Tweet</a>
	</footer>
	
</body>
</html>